<!-- page content -->
<div id="vueIndex" class="right_col" role="main">
	<h3>This is vue index..</h3>

	<p>{{title}}</p>

	<p>userName: <input v-bind:value="user.userName" /></p>
	<p>userName: <input v-model:value="user.userName" /></p>	<!--双向绑定,应用vue对userName进行自动更新改变model:value上面的v-bind会自动改变-->

	<select>
		<option v-for="(city, index) in cities" v-bind:value="city.id">{{city.cityName}}</option>
		<!--点击事件test1-->
	</select>
	<p><input type="button" value="test1" @click="test_1()" /></p>
</div>

<script>
	var vueTest = new Vue({
		el: "#vueIndex",
		data: {
			title: "Vue index",
			user: {
				userName: "Hujiang",
				age: 18,
			},
			cities: [
				{ id: 1, cityName: "北京" },
				{ id: 2, cityName: "上海" },
				{ id: 3, cityName: "广州" },
				{ id: 4, cityName: "深圳" },
				{ id: 5, cityName: "成都" },
			],
		},
		<!--函数methods-->
		methods: {
			test_1: function () {
				alert("Hello World");
			},
		},
	});
</script>
